<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
* Turf (https://github.com/Turfjs/turf/)
* proj4js (https://github.com/proj4js/proj4js)
* video.js (https://github.com/videojs/video.js)
* opencv (https://github.com/opencv/opencv)
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title data-i18n="resources.title_uavVideo"></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance,proj4,turf,videojs,opencv"
        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
        var map, videoLayer;
        var attribution =
            "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
        var dataUrl = 'https://iserver.supermap.io/iserver/services/data-video/rest/data';
        var datasourceName = 'VideoData';
        var datasetName = 'DJI_09304';
        var map = new mapboxgl.Map({
            container: 'map',
            renderWorldCopies: false,
            style: {
                version: 8,
                sources: {
                    'raster-tiles': {
                        type: 'raster',
                        tileSize: 256,
                        tiles: [
                            'https://t4.tianditu.gov.cn/img_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}&tk=1d109683f4d84198e37a38c442d68311'
                        ]
                    }
                },
                layers: [
                    {
                        id: 'simple-tiles',
                        type: 'raster',
                        source: 'raster-tiles',
                        minzoom: 0,
                        maxzoom: 22
                    }
                ]
            },
            center: [104.0685393316582, 30.491810619411483],
            zoom: 17
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        map.addControl(new mapboxgl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');
        function query() {
            var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
                queryParameter: {
                    name: datasetName + '@' + datasourceName,
                    attributeFilter: 'SMID > 0'
                },
                datasetNames: [datasourceName + ':' + datasetName]
            });

            new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
                const timeData = [];
                serviceResult.result.features.features[0].properties.videoParameters.videoParameterList.forEach((param) => {
                    let coordinates1 = [];
                    param.extent.points.forEach((coord) => {
                        const res = proj4('EPSG:3857', 'EPSG:4326', coord);
                        coordinates1.push(res);
                    });
                    let cameraLocation = param.calibrationModel.cameraLocation;
                    let calibrationModel = param.calibrationModel;
                    timeData.push({
                        time: param.time,
                        extent: [coordinates1[3], coordinates1[2], coordinates1[1], coordinates1[0]],
                        fovX: calibrationModel.fovX,
                        fovY: calibrationModel.fovY,
                        centerX: calibrationModel.centerX,
                        centerY: calibrationModel.centerY,
                        pitch: cameraLocation.cameraPitch,
                        roll: cameraLocation.cameraRoll,
                        yaw: cameraLocation.cameraYaw,
                        x: cameraLocation.cameraX,
                        y: cameraLocation.cameraY,
                        z: cameraLocation.cameraZ
                    });
                });
                let coordinates = [];
                turf.featureEach(serviceResult.result.features, function (currentFeature, featureIndex) {
                    currentFeature.geometry.coordinates[0][0].forEach((coord) => {
                        const res = proj4('EPSG:3857', 'EPSG:4326', coord);
                        coordinates.push(res);
                    });
                });
                var url = serviceResult.result.features.features[0].properties.address;
                var cameraLocation = serviceResult.result.features.features[0].properties.cameraLocation;
                var calibrationModel =
                    serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].calibrationModel;
                var clipRegionPoints =
                    serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].clipRegion
                        .points;
                videoLayer = new mapboxgl.supermap.VideoLayer({
                    url,
                    videoParameters: timeData,
                    clipRegion: [
                        [clipRegionPoints[0].x, clipRegionPoints[0].y],
                        [clipRegionPoints[1].x, clipRegionPoints[1].y],
                        [clipRegionPoints[2].x, clipRegionPoints[2].y],
                        [clipRegionPoints[3].x, clipRegionPoints[3].y]
                    ]
                });
                map.addLayer(videoLayer);
            });
        }
        map.on('load', function () {
            query();
        });
    </script>
</body>

</html>